<template>
  <el-dialog
      v-model = "showLogin"
      :modal = "false"
      :width = "'500px'"
      draggable
      :close-on-click-modal = "false"
      center
  >
    <template #header>
      <el-button @click = "showPage =1" v-show = "showPage ===2"> 点我和Lucy去月球</el-button>
      <h1 v-show = "showPage===1" style = "text-align: center">扫码登录</h1>
      <span @click = "showPage = 2" v-show = "showPage===3" style = "cursor: pointer">返回登录</span>
    </template>
    <!--扫码登录-->
    <div v-show = "showPage===1" @mouseenter = "showSample = true" @mouseleave = "showSample = false"
         class = "column-center-container login-container">
      <div class = "column-center-container page-container" style = "width: 100% ;margin: auto">
        <div class = "row-center-container" style = "width: 80%; height: 300px ;  position: relative;">
          <!--扫码示例-->
          <transition name = "sample">
            <div v-show = "showSample" class = "column-center-container sample-container">
              <el-image style = "width: 100%;height: 100%" :src = "logo" />
            </div>
          </transition>
          <!--二维码-->
          <div class = "column-center-container QR-container">
            <el-image style = "width: 100%" :src = "logo" />
            <span style = "margin: 10px 0 ">请使用网易云音乐APP登录</span>
          </div>
        </div>
        <span @click = "showPage = 2">点我用账号登录</span>
      </div>
    </div>
    <!--账号登录-->
    <div v-show = "showPage===2">
      <div class = "column-center-container page-container" style = "width: 100% ;margin: auto">
        <!--标题图片-->
        <el-image style = "width: 100px;height: 100px" :src = "logo" />
        <!--登录表单-->
        <el-form>
          <el-form-item label = "账号">
            <el-input v-model = "input" placeholder = "Please input" prefix-icon = "i-phone" />
          </el-form-item>
          <el-form-item label = "密码">
            <el-input v-model = "input" placeholder = "Please input" prefix-icon = "i-phone" />
          </el-form-item>
          <el-form-item label = "">
            <div class = "row-container" style = " width: 100%;justify-content: space-between">
              <el-checkbox v-model = "checked1" label = "自动登录" size = "large" />
              <el-space spacer = "|">
                <span>忘记密码</span>
                <span>验证码登录</span>
              </el-space>
            </div>
          </el-form-item>
          <el-form-item label = "">
            <div class = "row-container al-center" style = " width: 100%;justify-content: space-between">
              <el-checkbox v-model = "checked1" label = "请同意《隐私协议》" size = "large" />
              <span>不同意也行，随便你</span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class = "row-container jc-center" style = " width: 100%;">
              <el-button class = "add-playlist" style = "width: 100%">登录</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class = "row-container jc-center" style = " width: 100%;">
              <span @click = "showPage = 3" style = "text-decoration: underline">注册</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--账号注册-->
    <div v-show = "showPage===3">
      <div class = "column-center-container page-container" style = "width: 100% ;margin: auto">
        <!--标题图片-->
        <el-image style = "width: 100px;height: 100px" :src = "logo" />
        <!--登录表单-->
        <el-form>
          <el-form-item label = "账号">
            <el-input v-model = "input" placeholder = "Please input" prefix-icon = "i-phone" />
          </el-form-item>
          <el-form-item label = "密码">
            <el-input v-model = "input" placeholder = "请设置登录密码" prefix-icon = "i-phone" />
          </el-form-item>
          <el-form-item label = "">
            <div class = "row-container al-center" style = " width: 100%;justify-content: space-between">
              <el-checkbox v-model = "checked1" label = "请同意《隐私协议》" size = "large" />
              <span>不同意也行，随便你</span>
            </div>
          </el-form-item>
          <el-form-item>
            <div class = "row-container jc-center" style = " width: 100%;">
              <el-button class = "add-playlist" style = "width: 100%">注册</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import logo from '@/assets/logo.png'
import {ref} from "vue";

let showLogin = ref(false)
let showPage = ref(1)
let showSample = ref(false)
</script>

<style lang = "less" scoped>
.page-container {
  height: 420px;
}

//扫码登录
.login-container {

  height: 400px;

  .sample-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 300px;
    padding: 0 10px;
  }

  .QR-container {
    position: absolute;
    top: 0;
    right: 55px;
    width: 250px;
    transition: width 0.8s, right 0.8s, top 0.8s;

  }

  &:hover .QR-container {
    right: 0;
    top: 50px;
    width: 150px;

  }


  .sample-enter-active,
  .sample-leave-active {
    transition: opacity 0.8s ease;
  }

  .sample-enter-from,
  .sample-leave-to {
    opacity: 0;
  }

}

.add-playlist {
  border-radius: 10px;
  color: #fff;
  background-color: var(--main-color);

  &:hover {
    color: #fff;
    background-color: #d86767;
  }
}

//单选框样式
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: black;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

:deep(.el-checkbox__inner:hover) {
  border-color: var(--main-color);
}

// 头部靠左对齐
:deep(.el-dialog--center) {
  text-align: left;
}
</style>